<template>
  <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item prop="storeId">
            <treeselect v-model="queryParams.storeId" :options="storeOptions" :show-count="true" placeholder="仓库" style="width: 100px"/>
          </el-form-item>
          <el-form-item prop="deptId">
            <treeselect v-model="queryParams.deptId" :options="deptOptions" :show-count="true" placeholder="部门" style="width: 360px"/>
          </el-form-item>
          <el-form-item prop="wno">
            <el-input v-model="queryParams.wno" placeholder="出库单号" clearable size="small"
              @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item prop="pno">
            <el-input v-model="queryParams.pno" placeholder="物品编号" clearable size="small"
              @keyup.enter.native="handleQuery" style="width: 260px;" />
          </el-form-item>
          <el-form-item prop="name">
            <el-input v-model="queryParams.name" placeholder="物品名称" clearable size="small"
              @keyup.enter.native="handleQuery" />
          </el-form-item>

          <!-- <el-form-item label="所在单位" prop="deptId">
            <treeselect v-model="queryParams.deptId" :options="deptOptions" :show-count="true" placeholder="所在单位"
              style="width: 160px" size="small" />
          </el-form-item>
          <el-form-item label="所在机构" prop="orgId">
            <treeselect v-model="queryParams.orgId" :options="deptOptions" :show-count="true" placeholder="所在机构"
              style="width: 160px" size="small" />
          </el-form-item> -->

         <!-- <el-form-item label="状态" prop="status">
            <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">
              <el-option v-for="dict in dict.type.wms_ex_warehousing_status" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item> -->

          <el-form-item>
            <el-date-picker v-model="daterangeCreateTime" size="small" style="width: 240px" value-format="yyyy-MM-dd"
              type="daterange" range-separator="-" start-placeholder="创建起始日期" end-placeholder="截止日期"></el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            <el-button type="warning" icon="el-icon-refresh" size="mini" @click="openExport">导出</el-button>
          </el-form-item>
        </el-form>


        <el-table v-loading="loading" :data="exWarehouseDtlList" @selection-change="handleSelectionChange" border
          stripe>
          <el-table-column type="index" width="55" align="center" fixed="left" />
          <el-table-column label="出库订单" prop="exno" width="180" fixed="left" >
            <template slot-scope="scope">
              <el-link type="primary" @click="handleInfo(scope.row)">{{scope.row.exno}}</el-link>
            </template>
          </el-table-column>
          <el-table-column label="物品编号" prop="pno" width="260" fixed="left" />
          <el-table-column label="物品名称" prop="name" width="200" fixed="left" />
         <el-table-column label="仓库" prop="storeName" min-width="90" />
         <el-table-column label="部门" prop="deptName" min-width="320"/>
         <el-table-column label="数量" align="center" prop="nums"/>
         <!-- <el-table-column label="操作人" align="center" prop="nickName" /> -->
         <el-table-column label="操作时间" align="center" prop="createTime" width="180">
           <template slot-scope="scope">
             <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{m}') }}</span>
           </template>
         </el-table-column>

        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />
        <el-drawer :title="title" :visible.sync="open" size="75%" :before-close="close">
          <div class="mb20 ml20">
            <span style="font-size: 20px;">{{form.exno}}</span>
          </div>
          <el-card>
            <el-tabs value="1">
              <el-tab-pane label="申请详情" name="1">
                <el-card>
                  <el-descriptions title="基本信息" :column="4" border>
                    <el-descriptions-item label="申请单位"
                      :span="2">{{taskForm.deptName}}</el-descriptions-item>
                    <el-descriptions-item label="申请人">{{taskForm.name}}</el-descriptions-item>
                    <el-descriptions-item label="联系电话">{{taskForm.tel}}</el-descriptions-item>
                    <el-descriptions-item v-if="taskForm.delivery == '0'" label="联系地址"
                      :span="4">{{taskForm.address}}</el-descriptions-item>
                    <el-descriptions-item label="物流配送">
                      <dict-tag :options="dict.type.oms_out_delivery_type" :value="taskForm.delivery" />
                    </el-descriptions-item>
                    <el-descriptions-item label="物品数量">{{taskForm.nums}}</el-descriptions-item>
                    <el-descriptions-item :label="taskForm.type == '1'?'出库仓库':(taskForm.type == '2'?'处置仓库':'调用仓库')">{{taskForm.storeName}}</el-descriptions-item>
                    <el-descriptions-item label="有无钥匙" v-if="taskForm.carKey">{{taskForm.carKey}}</el-descriptions-item>
                    <el-descriptions-item label="有无行驶证" v-if="taskForm.driveLicen">{{taskForm.driveLicen}}</el-descriptions-item>
                    <el-descriptions-item label="无" v-if="taskForm.othreNone">{{taskForm.othreNone}}</el-descriptions-item>
                    <el-descriptions-item :label="taskForm.type == '1'?'出库原因':(taskForm.type == '2'?'处置原因':'调用原因')" :span="4">{{taskForm.remark}}</el-descriptions-item>
                    <el-descriptions-item label="附件" :span="4">
                      <el-image v-if="taskForm.oss && taskForm.oss.length > 0" v-for="(pic,pindex) in taskForm.oss"
                        style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransferThumbnail(pic,'one')" fit="scale-down"
                        :preview-src-list="ossTransfer(taskForm.oss,'list')"></el-image>
                    </el-descriptions-item>
                  </el-descriptions>
                </el-card>
                <el-card class="mb10 mt10" v-if="!handoverOptions || handoverOptions.length == 0">
                  <div ref="printOrderPre" id="printOrderPre" style="background-color:#fff;">
                    <el-card id="handoverCard" class="box-card" style="padding: 50px 2vw 30px 2vw;background-color:#fff;" shadow="never">
                      <div slot="header"
                        style="text-align: center;font-size:26px;margin-bottom: 20px;font-weight: 800;padding-bottom: 15px;">
                        <span>{{taskForm.type == '1'?'涉案财物移送确认清单':(taskForm.type=='2'?'涉案财物处置确认清单':'涉案财物调用确认清单')}}</span>
                        <el-button type="warning" icon="el-icon-printer" circle size="mini" class="fr"
                          @click="handlePrintPre((taskForm.type == '1'?'涉案财物移送确认清单-':(taskForm.type=='2'?'涉案财物处置确认清单-':'涉案财物调用确认清单-'))+taskForm.taskNo)"></el-button>
                      </div>
                      <el-descriptions :column="3" class="mb10 mt10"
                        :labelStyle="{'backgroundColor':'#fff','fontSize':'16px','fontWeight':'bold'}"
                        :contentStyle="{'fontSize':'16px','fontWeight':'bold'}">
                        <el-descriptions-item label="订单编号">{{taskForm.taskNo}}</el-descriptions-item>
                        <el-descriptions-item label="配送类型">
                          <dict-tag :options="dict.type.oms_out_delivery_type" :value="taskForm.delivery" />
                        </el-descriptions-item>
                        <el-descriptions-item label="下单时间">{{parseTime(taskForm.createTime) }}</el-descriptions-item>
                        <el-descriptions-item v-if="taskForm.type == '1'" label="移送原因">{{taskForm.remark}}</el-descriptions-item>
                        <el-descriptions-item v-if="taskForm.type == '3'" label="调用原因">{{taskForm.dispatchRemark}}</el-descriptions-item>
                        <el-descriptions-item label="移送单位" :span="taskForm.type !='2'?1:2">{{taskForm.storeDeptName}}</el-descriptions-item>
                        <el-descriptions-item label="接收单位">{{taskForm.deptName}}</el-descriptions-item>
                        <el-descriptions-item label="调用员" v-if="taskForm.delivery == '0'">{{taskForm.dispatcher}}</el-descriptions-item>
                      </el-descriptions>
                      <el-table :data="taskForm.items" border :headerCellStyle="{'backgroundColor':'#fff','fontSize':'18px'}"
                        :cell-style="{'fontSize':'16px','fontWeight':'bold'}">
                        <el-table-column label="序号" type="index" width="80" align="center" />
                        <el-table-column label="物品编号" align="left" prop="pno" width="260" />
                        <el-table-column label="物品名称" align="left" prop="name" width="220" />
                        <el-table-column label="数量" align="center" prop="nums" width="75" />
                        <el-table-column label="处置类型" align="center" prop="dealType" width="125" v-if="taskForm.type == '2'">
                           <template slot-scope="scope">
                             <dict-tag :options="dict.type.deal_type" :value="scope.row.dealType" />
                           </template>
                        </el-table-column>
                        <el-table-column label="特征" align="left" prop="character" />
                      </el-table>
                      <el-row v-if="taskForm.propertyType == 3" class="mt20">
                        <el-col :span="6" v-if="taskForm.carKey"><strong>{{taskForm.carKey}}</strong></el-col>
                        <el-col :span="6" v-if="taskForm.driveLicen"><strong>{{taskForm.driveLicen}}</strong></el-col>
                        <el-col :span="12" v-if="taskForm.othreNone"><strong>{{taskForm.othreNone}}</strong></el-col>
                      </el-row>
                      <el-row class="mt20">
                        <el-col :span="8" style="padding: 10px 15px;">
                          <div class="mb5">
                               <span>中心保管员签字</span>
                          </div>
                            <span>
                              <el-image style="width: 100%;height: 150px;" :src="require('@/assets/images/default-img.png')" />
                              <span>签字时间：</span>
                            </span>
                        </el-col>
                        <el-col :span="8" style="padding: 10px 15px;">
                          <div class="mb5">
                              <span>中心押运员签字</span>
                          </div>
                          <span>
                            <el-image style="width: 100%;height: 150px;" :src="require('@/assets/images/default-img.png')" />
                          </span>
                          <span>签字时间：</span>
                        </el-col>
                        <el-col :span="8" style="padding: 10px 15px;">
                          <div class="mb5">
                            <span>办案单位签收人签字</span>
                          </div>
                           <el-image style="width: 100%;height: 150px;" :src="require('@/assets/images/default-img.png')" />
                          <span>签字时间：</span>
                        </el-col>
                      </el-row>
                    </el-card>
                  </div>
                </el-card>
              </el-tab-pane>
              <el-tab-pane label="物品清单" name="2">
                <el-table :data="taskForm.items" border stripe>
                  <el-table-column type="index" width="55" align="center"></el-table-column>
                  <el-table-column label="物品编号" align="left" prop="pno" width="260">
                    <template slot-scope="scope">
                      <span>{{scope.row.pno}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="物品名称" align="left" prop="name" width="200">
                    <template slot-scope="scope">
                      <span>{{scope.row.name}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="数量" align="center" prop="nums" width="75">
                    <template slot-scope="scope">
                      <span>{{scope.row.nums}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="处置类型" align="center" prop="dealType" width="125" v-if="taskForm.type == '2'">
                     <template slot-scope="scope">
                       <dict-tag :options="dict.type.deal_type" :value="scope.row.dealType" />
                     </template>
                  </el-table-column>
                  <el-table-column label="图片" align="left" prop="oss">
                    <template slot-scope="scope">
                      <el-image v-if="scope.row.oss && scope.row.oss.length > 0" v-for="(pic,pindex) in scope.row.oss"
                        style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransferThumbnail(pic,'one')" fit="scale-down"
                        :preview-src-list="ossTransfer(scope.row.oss,'list')"></el-image>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="交接信息" name="3" v-if="handoverOptions && handoverOptions.length > 0">
                <template v-for="item in handoverOptions">
                  <el-card class="mb10">
                    <div ref="printOrder" id="printOrder" style="background-color:#fff;">
                      <el-card id="handoverCard" class="box-card" style="padding: 50px 2vw 30px 2vw;background-color:#fff;" shadow="never">
                        <div slot="header"
                          style="text-align: center;font-size:18px;margin-bottom: 20px;font-weight: 800;padding-bottom: 15px;">
                          <span>{{taskForm.type == '1'?'涉案财物移送确认清单':(taskForm.type=='2'?'涉案财物处置确认清单':'涉案财物调用确认清单')}}</span>
                          <el-button type="warning" icon="el-icon-printer" circle size="mini" class="fr"
                            @click="handlePrint((taskForm.type == '1'?'涉案财物移送确认清单-':(taskForm.type=='2'?'涉案财物处置确认清单-':'涉案财物调用确认清单-'))+item.taskNo)"></el-button>
                        </div>
                        <el-descriptions :column="3"
                          :labelStyle="{'backgroundColor':'#fff','fontSize':'16px','fontWeight':'bold'}"
                          :contentStyle="{'fontSize':'16px','fontWeight':'bold'}">
                          <el-descriptions-item label="订单编号">{{item.taskNo}}</el-descriptions-item>
                          <el-descriptions-item label="配送类型">
                            <template v-for="dict in dict.type.oms_out_delivery_type">
                              <span v-if="dict.value == item.taskType">{{dict.label}}</span>
                            </template>
                          </el-descriptions-item>
                          <el-descriptions-item label="下单时间">{{item.flag == '0'?item.orderCreates:form.createTime}}</el-descriptions-item>
                          <el-descriptions-item v-if="taskForm.type == '1'" label="移送原因">{{taskForm.remark}}</el-descriptions-item>
                          <el-descriptions-item v-if="taskForm.type == '3'" label="调用原因">{{taskForm.dispatchRemark}}</el-descriptions-item>
                          <el-descriptions-item label="移送单位" :span="taskForm.type !='2'?1:2">{{item.receiveDeptName}}</el-descriptions-item>
                          <!-- <el-descriptions-item label="移交单位" :span="2">{{item.receiveDeptName}}</el-descriptions-item> -->
                          <el-descriptions-item label="接收单位">{{item.transferDeptName}}</el-descriptions-item>
                          <el-descriptions-item label="调用员" v-if="taskForm.delivery == '0'">{{taskForm.dispatcher}}</el-descriptions-item>
                        </el-descriptions>
                        <el-table :data="taskForm.items" border :headerCellStyle="{'backgroundColor':'#fff','fontSize':'18px'}"
                          :cell-style="{'fontSize':'16px','fontWeight':'bold'}">
                          <el-table-column label="序号" type="index" width="80" align="center" />
                          <el-table-column label="财物编号" align="center" prop="pno" min-width="100" />
                          <el-table-column label="财物名称" align="center" prop="name" />
                          <el-table-column label="数量" align="center" prop="nums" />
                          <el-table-column label="处置类型" align="center" prop="dealType" width="125" v-if="taskForm.type == '2'">
                             <template slot-scope="scope">
                               <dict-tag :options="dict.type.deal_type" :value="scope.row.dealType" />
                             </template>
                          </el-table-column>
                          <el-table-column label="特征" align="center" prop="character" />
                        </el-table>
                        <el-row class="mt20">
                          <el-col :span="8" style="padding: 10px 15px;">
                            <div class="mb5">
                                 <span>中心保管员签字</span>
                            </div>
                              <span>
                                <el-image v-if="item.checkSign" style="width: 100%;height: 150px;" :src="getPictureHost()+item.checkSign" :preview-src-list="[getPictureHost()+item.checkSign]" />
                                <el-image v-else  style="width: 100%;height: 150px;" :src="require('@/assets/images/default-img.png')" />
                                <span style="font-size: 12px;">{{'签字时间：'+(item.checkSign&&item.pickUpTime?item.pickUpTime:'')}}</span>
                              </span>
                          </el-col>
                          <el-col :span="8" style="padding: 10px 15px;">
                            <div class="mb5">
                                <span>中心押运员签字</span>
                            </div>
                            <span>
                              <el-image v-if="item.handPics" style="width: 100%;height: 150px;" :src="getPictureHost()+item.handPics" :preview-src-list="[getPictureHost()+item.handPics]" />
                              <el-image v-else  style="width: 100%;height: 150px;" :src="require('@/assets/images/default-img.png')" />
                            </span>
                            <span style="font-size: 12px;">{{'签字时间：'+(item.handPics&&item.pickUpTime?item.pickUpTime:'')}}</span>
                          </el-col>
                          <el-col :span="8" style="padding: 10px 15px;">
                            <div class="mb5">
                              <span>办案单位签收人签字</span>
                            </div>
                             <el-image v-if="item.signs" style="width: 100%;height: 150px;" :src="getPictureHost()+item.signs" :preview-src-list="[getPictureHost()+item.signs]" />
                             <el-image v-else  style="width: 100%;height: 150px;" :src="require('@/assets/images/default-img.png')" />
                            <span style="font-size: 12px;">{{'签字时间：'+(item.arrivalTime?item.arrivalTime:'')}}</span>
                          </el-col>
                        </el-row>
                      </el-card>
                    </div>
                  </el-card>
                </template>
              </el-tab-pane>
              <el-tab-pane label="交接原件" name="4" v-if="handoverOssList && handoverOssList.length > 0">
                <el-image v-for="(pic,pindex) in handoverOssList" style="width: 100%;" :src="ossTransfer(pic,'list')"
                  fit="scale-down" :preview-src-list="ossTransfer(handoverOssList,'list')"></el-image>
              </el-tab-pane>
              <el-tab-pane label="配送信息" name="5" v-if="orderOptions">
                <el-tabs tab-position="left" value="wayOrder">
                  <el-tab-pane label="订单信息" name="wayOrder">
                    <el-descriptions title="基本信息" :column="3" border>
                      <el-descriptions-item label="订单编号">{{orderOptions.orderNo}}</el-descriptions-item>
                      <el-descriptions-item label="所属部门">{{orderOptions.deptName}}</el-descriptions-item>
                      <el-descriptions-item label="物品数量">{{orderOptions.nums}}</el-descriptions-item>
                      <el-descriptions-item label="客户名称"
                        v-if="orderOptions.clientName">{{orderOptions.clientName}}</el-descriptions-item>
                      <el-descriptions-item label="联系人"
                        v-if="orderOptions.clientContacts">{{orderOptions.clientContacts}}</el-descriptions-item>
                      <el-descriptions-item label="联系电话"
                        v-if="orderOptions.clientTel">{{orderOptions.clientTel}}</el-descriptions-item>
                      <el-descriptions-item label="备注" :span="3">{{orderOptions.memo}}</el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions title="寄收地址" :column="3" border style="margin-top: 15px;">
                      <el-descriptions-item label="寄件单位">{{orderOptions.sendAddr}}</el-descriptions-item>
                      <el-descriptions-item label="寄件联系人">{{orderOptions.sendContacts}}</el-descriptions-item>
                      <el-descriptions-item label="联系方式">{{orderOptions.sendTel}}</el-descriptions-item>
                      <el-descriptions-item label="寄件地址" :span="3">{{orderOptions.sendAddress}}</el-descriptions-item>
                      <el-descriptions-item label="收件单位">{{orderOptions.takeAddr}}</el-descriptions-item>
                      <el-descriptions-item label="收件联系人">{{orderOptions.takeContacts}}</el-descriptions-item>
                      <el-descriptions-item label="联系方式">{{orderOptions.takeTel}}</el-descriptions-item>
                      <el-descriptions-item label="收件地址" :span="3">{{orderOptions.takeAddress}}</el-descriptions-item>
                    </el-descriptions>
                    <el-card style="margin-top: 15px;">
                      <div slot="header" class="clearfix">
                        <span style="font-weight: bold;">物品清单</span>
                      </div>
                      <el-table :data="orderOptions.items">
                        <el-table-column label="编号" prop="pno" />
                        <el-table-column label="名称" prop="name" />
                        <el-table-column label="数量" prop="nums" />
                      </el-table>
                    </el-card>
                    <el-card v-if="form.buss == '1'">
                      <div slot="header" class="clearfix">
                        <span>车辆附件</span>
                      </div>
                      <el-card class="fl mr10 mb10" style="width: 32%">
                        <div slot="header" class="clearfix">
                          <span>车架号</span>
                        </div>
                        <el-image v-if="orderOptions.carOss && orderOptions.carOss.length > 0"
                          v-for="(pic,pindex) in orderOptions.carOss" style="width: 120px; height: 60px;margin-right: 5px;"
                          :src="ossTransferThumbnail(pic,'one')" fit="scale-down"
                          :preview-src-list="ossTransfer(orderOptions.carOss,'list')"></el-image>
                      </el-card>
                      <el-card class="fl mr10 mb10" style="width: 32%">
                        <div slot="header" class="clearfix">
                          <span>交接现场</span>
                        </div>
                        <el-image v-if="orderOptions.handoverOss && orderOptions.handoverOss.length > 0"
                          v-for="(pic,pindex) in orderOptions.handoverOss"
                          style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransferThumbnail(pic,'one')"
                          fit="scale-down" :preview-src-list="ossTransfer(orderOptions.handoverOss,'list')"></el-image>
                      </el-card>
                      <el-card class="fl mr10 mb10" style="width: 32%" v-if="orderOptions.loadOss && orderOptions.loadOss.length > 0">
                        <div slot="header" class="clearfix">
                          <span>45度装车</span>
                        </div>
                        <el-image v-if="orderOptions.loadOss && orderOptions.loadOss.length > 0"
                          v-for="(pic,pindex) in orderOptions.loadOss" style="width: 120px; height: 60px;margin-right: 5px;"
                          :src="ossTransferThumbnail(pic,'one')" fit="scale-down"
                          :preview-src-list="ossTransfer(orderOptions.loadOss,'list')"></el-image>
                      </el-card>
                      <el-card class="fl mr10 mb10" style="width: 32%">
                        <div slot="header" class="clearfix">
                          <span>到达目的地</span>
                        </div>
                        <el-image v-if="orderOptions.takeOss && orderOptions.takeOss.length > 0"
                          v-for="(pic,pindex) in orderOptions.takeOss" style="width: 120px; height: 60px;margin-right: 5px;"
                          :src="ossTransferThumbnail(pic,'one')" fit="scale-down"
                          :preview-src-list="ossTransfer(orderOptions.takeOss,'list')"></el-image>
                      </el-card>
                      <el-card class="fl mr10 mb10" style="width: 32%">
                        <div slot="header" class="clearfix">
                          <span>卸车</span>
                        </div>
                        <el-image v-if="orderOptions.unloadOss && orderOptions.unloadOss.length > 0"
                          v-for="(pic,pindex) in orderOptions.unloadOss"
                          style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransferThumbnail(pic,'one')"
                          fit="scale-down" :preview-src-list="ossTransfer(orderOptions.unloadOss,'list')"></el-image>
                      </el-card>
                      <el-card class="fl mr10 mb10" style="width: 32%">
                        <div slot="header" class="clearfix">
                          <span>其他</span>
                        </div>
                        <el-image v-if="orderOptions.otherOss && orderOptions.otherOss.length > 0"
                          v-for="(pic,pindex) in orderOptions.otherOss"
                          style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransferThumbnail(pic,'one')"
                          fit="scale-down" :preview-src-list="ossTransfer(orderOptions.otherOss,'list')"></el-image>
                      </el-card>
                    </el-card>
                  </el-tab-pane>
                  <el-tab-pane label="运单信息"  name="wayBill" v-if="orderOptions.wayItems && orderOptions.wayItems.length > 0">
                    <template v-for="item in orderOptions.wayItems">
                      <el-steps :active="item.status == 2?0:(item.status == 3?1:(item.status == 5?2:3))" align-center
                        process-status="finish" finish-status="success" simple style="margin-bottom: 10px;">
                        <el-step title="发车"></el-step>
                        <el-step title="到达"></el-step>
                        <el-step title="签收"></el-step>
                        <el-step title="完成"></el-step>
                      </el-steps>
                      <el-tabs value="1">
                        <el-tab-pane label="基本信息" name="1">
                          <el-descriptions :column="3" border>
                            <el-descriptions-item label="运单编号">{{item.waybillNo}}</el-descriptions-item>
                            <el-descriptions-item label="线路">{{item.lineName}}</el-descriptions-item>
                            <el-descriptions-item label="车次">{{item.scheduleName}}</el-descriptions-item>
                            <el-descriptions-item label="车牌号">{{item.carNumber}}</el-descriptions-item>
                            <el-descriptions-item label="司机" :span="2">{{item.driverName}}</el-descriptions-item>
                            <el-descriptions-item label="物品数量">{{item.nums}}</el-descriptions-item>
                          </el-descriptions>
                        </el-tab-pane>
                        <el-tab-pane label="物品清单" name="2">
                          <el-card>
                            <el-table :data="item.items">
                              <el-table-column label="编号" prop="pno" />
                              <el-table-column label="名称" prop="name" />
                              <el-table-column label="数量" prop="nums" />
                            </el-table>
                          </el-card>

                        </el-tab-pane>
                        <el-tab-pane label="日志跟踪" name="3">
                          <el-card>
                            <el-table :data="item.logItems">
                              <el-table-column label="操作人" prop="operator" />
                              <el-table-column label="节点名称">
                                <template slot-scope="scope">
                                  <dict-tag :options="dict.type.tms_track_log_type" :value="scope.row.type" />
                                </template>
                              </el-table-column>
                              <el-table-column label="操作时间" prop="createTime"></el-table-column>
                              <el-table-column label="备注" prop="memeo" />
                            </el-table>
                          </el-card>
                        </el-tab-pane>
                      </el-tabs>
                    </template>
                  </el-tab-pane>
                </el-tabs>
              </el-tab-pane>
              <el-tab-pane label="挑拣任务" name="6" v-if="putTaskOptions && putTaskOptions.length > 0">
                <template v-for="item in putTaskOptions">
                  <el-card style="margin-bottom: 15px;">
                    <el-descriptions :column="3" border>
                      <el-descriptions-item label="任务编号">{{item.pickNo}}</el-descriptions-item>
                      <el-descriptions-item label="挑拣员">{{item.nickName}}</el-descriptions-item>
                      <el-descriptions-item label="状态">
                        <dict-tag :options="dict.type.wms_pick_task_status" :value="item.status" />
                      </el-descriptions-item>
                    </el-descriptions>
                    <el-card style="margin-top: 15px;" shadow="never">
                      <div slot="header" class="clearfix">
                        <span>物品清单</span>
                      </div>
                      <el-table :data="item.items">
                        <el-table-column label="编号" prop="pno" />
                        <el-table-column label="名称" prop="name" />
                        <el-table-column label="数量" prop="nums" />
                        <el-table-column label="状态" prop="nums">
                          <template slot-scope="scope">
                            <dict-tag :options="dict.type.wms_pick_task_status" :value="scope.row.status" />
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-card>
                  </el-card>
                </template>
              </el-tab-pane>
              <el-tab-pane label="操作日志" name="7">
                <el-table :data="logOptions" border stripe>
                  <el-table-column label="序号" type="index" width="50" align="center" />
                  <el-table-column label="操作时间" align="left" prop="logTime" width="180" />
                  <el-table-column label="操作人" align="left" prop="operator" width="200" />
                  <el-table-column label="操作内容" align="left" prop="content" />
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-drawer>
    <out-warehouse-export
      v-if="planExportShow"
      @close="close"
    ></out-warehouse-export>
  </div>
</template>

<script>
  import {
    listExWarehouseDtl,
    getExWarehouseDtl,
    delExWarehouseDtl,
    addExWarehouseDtl,
    updateExWarehouseDtl
  } from "@/api/wms/exWarehouseDtl";
  import {
    listStore,
    storeTreeselect
  } from "@/api/wms/store";
  import {
    treeselect
  } from "@/api/system/dept";
  import {listExWarehouse,getExWarehouse} from "@/api/wms/exWarehouse";
  import {listHandover,listHandoverInfo} from '@/api/wms/handover'
  import {getPickTask} from '@/api/wms/pick'
  import {listOperatorLog} from "@/api/oms/operatorLog"
  import {getTask} from "@/api/oms/task";
  import { listOss} from '@/api/system/oss'
  import {getOrderTask} from '@/api/tms/order';
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import OutWarehouseExport from "@/views/wms/exWarehouseDtl/outWarehouseExport.vue";
  export default {
    name: "ExWarehouseDtl",
    dicts: ['sys_del_flag', 'wms_ex_warehousing_status','oms_delivery_type','wms_delivery_type','handover_dtl_status','oms_property_type','wms_pick_task_status','deal_type','oms_out_delivery_type'],
    components: {
      OutWarehouseExport,
      Treeselect
    },
    data() {
      return {
        planExportShow: false,
        // 按钮loading
        buttonLoading: false,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 出库明细表格数据
        exWarehouseDtlList: [],
        storeOptions: [],
        storeTree: [],
        storeName: undefined,
        deptOptions: [],
        defaultProps: {
          children: "children",
          label: "label"
        },
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 状态时间范围
        daterangeCreateTime: [],
        // 状态时间范围
        daterangeUpdateTime: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          wid: undefined,
          pno: undefined,
          name: undefined,
          deptId: undefined,
          orgId: undefined,
          status: undefined,
          createTime: undefined,
          createBy: undefined,
          updateTime: undefined,
          updateBy: undefined,
          delFlag: undefined
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          wid: [{
            required: true,
            message: "出库单ID不能为空",
            trigger: "blur"
          }],
          pno: [{
            required: true,
            message: "物品编号不能为空",
            trigger: "blur"
          }],
          name: [{
            required: true,
            message: "物品名称不能为空",
            trigger: "blur"
          }],
          deptId: [{
            required: true,
            message: "物品所在单位不能为空",
            trigger: "blur"
          }],
          orgId: [{
            required: true,
            message: "物品所在机构单位不能为空",
            trigger: "blur"
          }],
          nums: [{
            required: true,
            message: "数量不能为空",
            trigger: "blur"
          }],
        },
        taskForm:{},
        //上架任务
        putTaskOptions:[],
        //交接信息
        handoverOptions:[],
        //操作日志
        logOptions:[],
        printTask:[],
        handoverOssList: [],
        //详情-订单
        orderOptions: {}
      };
    },
    watch: {
      storeName(val) {
        this.$refs.tree.filter(val);
      },
      'queryParams.deptId': {
        handler(newVal, oldVal) {
          this.deptChange();
        },
        deep: true,
        immediate: true
      }
    },
    created() {
      this.getList();
      this.getStoreTreeselect();
      this.getTreeselect();
    },
    methods: {
      openExport(){
        this.planExportShow = true
      },
      /** 查询出库明细列表 */
      getList() {
        this.loading = true;
        this.queryParams.params = {};
        if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
          this.queryParams.params["beginCreateTime"] = this.daterangeCreateTime[0];
          this.queryParams.params["endCreateTime"] = this.daterangeCreateTime[1];
        }
        if (null != this.daterangeUpdateTime && '' != this.daterangeUpdateTime) {
          this.queryParams.params["beginUpdateTime"] = this.daterangeUpdateTime[0];
          this.queryParams.params["endUpdateTime"] = this.daterangeUpdateTime[1];
        }
        listExWarehouseDtl(this.queryParams).then(response => {
          this.exWarehouseDtlList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      /** 查询分类下拉树结构 */
      getStoreTreeselect() {
        storeTreeselect().then(response => {
          this.storeOptions = response.data;
        });
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        treeselect().then(response => {
          this.deptOptions = response.data;
        });
      },
      deptChange() {
        this.getList();
      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 节点单击事件
      handleNodeClick(data) {
        this.queryParams.storeId = data.id;
        this.handleQuery();
      },
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.id,
          label: node.name,
          children: node.children
        };
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          wid: undefined,
          pno: undefined,
          name: undefined,
          deptId: undefined,
          orgId: undefined,
          nums: undefined,
          pics: undefined,
          status: undefined,
          createTime: undefined,
          createBy: undefined,
          updateTime: undefined,
          updateBy: undefined,
          delFlag: undefined
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.daterangeCreateTime = [];
        this.daterangeUpdateTime = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加出库明细";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.loading = true;
        this.reset();
        const id = row.id || this.ids
        getExWarehouseDtl(id).then(response => {
          this.loading = false;
          this.form = response.data;
          this.open = true;
          this.title = "修改出库明细";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.buttonLoading = true;
            if (this.form.id != null) {
              updateExWarehouseDtl(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              }).finally(() => {
                this.buttonLoading = false;
              });
            } else {
              addExWarehouseDtl(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              }).finally(() => {
                this.buttonLoading = false;
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认删除出库明细编号为"' + ids + '"的数据项？').then(() => {
          this.loading = true;
          return delExWarehouseDtl(ids);
        }).then(() => {
          this.loading = false;
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).finally(() => {
          this.loading = false;
        });
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('wms/exWarehouseDtl/export', {
          ...this.queryParams
        }, `exWarehouseDtl_${new Date().getTime()}.xlsx`)
      },
      //查看详情
      handleInfo(row){
        getExWarehouse(row.wid).then(response => {
          this.form = response.data;
          getTask(response.data.taskId).then(response => {
            this.taskForm = response.data;
            if(response.data.type == '1'){
              this.title = '出库单详情'
            }
            if(response.data.type == '2'){
              this.title = '处置单详情'
            }
            if(response.data.type == '3'){
              this.title = '调用单详情'
            }
            //交接明细
            this.getHandover(this.taskForm.id);
            this.getOrderInfo(this.taskForm.id);
            this.getPutTaskInfo(this.taskForm.id);
            this.getLogs(this.taskForm.id);
            this.getHandoverOss(this.taskForm.id);
            this.open = true;
          })
        });
      },
      /** 查询订单信息 */
      getOrderInfo(id) {
        getOrderTask(id).then(response => {
          this.orderOptions = response.data;
        })
      },
      //上架任务
      getPutTaskInfo(id){
        getPickTask(id).then(response=>{
          this.putTaskOptions = response.data;
        })
      },
      /** 查询交接信息 */
      getHandover(id) {
        listHandoverInfo({
          'objid': id
        }).then(response => {
          this.handoverOptions = response.data;
        })
      },
      getHandoverOss(objid) {
        listOss({
          'objid': objid,
          'buss': 'handoverDtl'
        }).then(response => {
          console.info('getHandoverOss======>', response)
          this.handoverOssList = response.rows;
        })
      },
      //日志
      getLogs(id){
        listOperatorLog({"objid":id,"logType":"wms"}).then(response=>{
          this.logOptions = response.rows;
        })
      },
      //关闭
      close(){
        this.open = false;
        this.planExportShow = false
      }
    }
  };
</script>
